<template>
  <div class="insure">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">车险投保</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <img style="width: 100%;" src="~assets/car/carInsure.png">

    <div class="car-content" style="margin-top: 0px;">
      <group class="car-shadow">

        <cell>
          <span class="car__list--title" slot="after-title">
            <img class="go-back car-list-img" src="~assets/car/insure-icon.png">
            <span class="car__iconspan--title">
              车险投保</span>
          </span>
        </cell>

        <div class="car__formPolicy">
          <div>

            <x-input class="car-input base-input_font" v-model="carInsureData.licenseNo" :readonly="carInsureData.isNewCar" placeholder="车牌号" :max="16" required>
              <div class="insure__input" slot="label">
                <!-- 证件号码&nbsp -->
                <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
              </div>
              <!-- <div class="insure__input" slot="right"> -->
              <!-- 证件号码&nbsp -->
              <check-icon class="insure__input" slot="right" :value.sync="carInsureData.isNewCar">未上牌新车</check-icon>
              <!-- </div> -->
            </x-input>
            <x-input class="car-input base-input_font" v-model="carInsureData.carOwner" :min="2" :max="17" placeholder="车主姓名" required>
              <div class="insure__input" slot="label">
                <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
              </div>
            </x-input>

          </div>
        </div>

      </group>

      <group class="car-shadow" v-show="user.isLogin">
        <cell @click.native="isShowDetail=!isShowDetail" :border-intent='false' class="car-insure-list">
          <span class="car__list--title" slot="after-title">
            <img slot="icon" src="~assets/car/offer-icon.png" class="go-back car-list-img">
            <span style="color: #fff;" class="car__iconspan--title">报价记录</span>
          </span>
          <div slot="default">
            <img v-show="!isShowDetail" style="width: 17px !important;" src="~assets/car/ycDetail.png" class="go-back car-list-img">
            <img v-show="isShowDetail" style="width: 17px !important;" src="~assets/car/showDetail.png" class="go-back car-list-img">
          </div>
        </cell>
        <div v-show="isShowDetail">
          <cell v-for="(item,index) in seleValue.showCarSaveData" :key="index" primary="content" @click.native="getSaveDataId(item.id)" is-link>
            <!-- <div slot="icon">2</div> -->
            <img slot="icon" style="width: 30px;" src="~assets/car/car-offer.png">
            <div slot="inline-desc">
              <div class="save-mark">&nbsp&nbsp{{item.mark}}</div>
              <div class="save-time">&nbsp&nbsp{{item.createTime}}</div>
            </div>
            <div v-show="item.price!=''&&item.price!=null" class="save-price" slot="default">¥&nbsp{{item.price}}</div>
          </cell>

          <cell v-show="seleValue.showCarSaveData.length==0" primary="content">
            <div class="no-savedata">
              没有报价记录,快去报价吧！
            </div>

          </cell>

        </div>
      </group>

    </div>
    <!-- 投保人信息 -->
    <!-- <group class="insure__formPolicy--group">
      <cell>
        <span class="insure__list--title" slot="after-title">
        </span>
      </cell>

      <div class="insure__formPolicy">
        <div>
          <x-input class="car-input base-input_font" v-model="carInsureData.licenseNo" :readonly="carInsureData.isNewCar" placeholder="车牌号" :max="16" required>
            <div class="insure__input" slot="label">
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
            <check-icon class="insure__input" slot="right" :value.sync="carInsureData.isNewCar">未上牌新车</check-icon>
          </x-input>
          <x-input class="car-input base-input_font" v-model="carInsureData.carOwner" :min="2" :max="17" placeholder="车主姓名" required>
            <div class="insure__input" slot="label">
              <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
        </div>
      </div>
    </group> -->

    <!-- <div class="carinsure-btn">
      <x-button class="btn" type="primary" action-type="button" @click.native="goInsureCar">车险投保</x-button>
    </div> -->

    <div class="details__footer_sub">
      <div class="details__footer_sub_left">
        <!-- 智齿客服,为了加载不显示客服浮窗，class必须有zhiCustomBtn值，电话请加上 @click="onlineClick" -->
        <div class="service" @click="onlineClick"><img src="~assets/x3/service/old_service_zxkf.png"></div>
        <div><img src="~assets/x3/ico/share.png" @click="shareShow"></div>
      </div>
      <div @click="goInsureCar()" class="details__footer_details_rigth">
        立即投保
      </div>
    </div>

    <div class="weChatShadeDiv" v-show="weChatShade" @click="shareHide">
      <img class="details__arrow" src="~assets/x3/share-it.png">
      <a href="JavaScript:void(0);" class="follow">
        <p>
          请点击右上角<br>即可分享当前内容
        </p>
      </a>
    </div>

    <actionsheet class="insure__actionsheet" v-show="isShowCarSele" v-model="isShowCarSele">
      <div slot="header">
        <car-sele @closeCarSele="closeCarSele"></car-sele>
      </div>
    </actionsheet>

    <div style="height: 100px;"></div>

    <x-dialog v-model="isShowShare" class="share-Einv" hide-on-blur>
      <div class="share-div">
        <qrcode class="share-qrcode" :value="shopShareUrl" type="img"></qrcode>
        <div id="shop-share"></div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import share from 'src/common/share';
import "src/assets/share/share.min.css";
import "src/assets/share/jquery.share.min.js";
import SharePage from "src/js/sharePage"; //引入微信分享js
import onlineCustomerService from "src/js/onlineCustomerService";//引入在线客服js
// import CarConfigRemote from "src/common/config/carConfigRemote";
import CarSele from "src/components/car/carSele";
import { RequestUrl } from "src/common/url";
// import Config from "src/common/config/insureConfig";
import {
  Car_Mutations,
  Gender,
  PerIdentifyType,
  EntIdentifyType,
  benefType,
  insuredidentity,
  intervalTime,
  RouteUrl,
  Mutations,
  Url_Key
} from "src/common/const";
import {
  XHeader,
  Group,
  Cell,
  XInput,
  Datetime,
  XSwitch,
  Selector,
  XButton,
  XDialog,
  CellFormPreview,
  Actionsheet,
  TransferDom,
  Toast,
  CheckIcon,
  CellBox,
  Qrcode
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    Qrcode,
    CarSele,
    CellBox,
    CellFormPreview,
    XDialog,
    Selector,
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    XButton,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon
  },
  computed: mapState({
    // insure: "insure",
    isLoading: "isLoading",
    user: "user",
    isWeChar: "isWeChar",
    initIndexData: "initIndexData",
    car: "car",
    newCarSele: "newCarSele",
    seleValue: "seleValue",
    saveInsure: "saveInsure",
    shareUuid: "shareUuid",
    isInitData: "isInitData"
  }),
  data() {
    return {
      isShowDetail: true,
      shopShareUrl: "",
      test1: false,
      test: "",
      carInsureData: {
        licenseNo: "",
        carOwner: "",
        isNewCar: false,
      },
      isShowCarSele: false,
      isSetData: false,
      weChatShade: false, //微信分享遮罩
      isShowShare: false,
      isSaveData: true,
    };
  },
  watch: {
    isInitData(cur, old) {
      if (cur) {
        //初始化分享
        this.initShare();
      }
    },
    'carInsureData.isNewCar': {
      handler(cur, old) {
        if (cur && !this.isSetData) {
          this.isShowCarSele = true;
        }
      }
    },
    isShowCarSele(cur, old) {
      if (!cur) {
        this.carInsureData.licenseNo = this.newCarSele;
      }
    },
  },
  filters: {

  },
  methods: {
    getSaveDataId(val) {
      this.isSaveData = false;
      let query = {
        _this: this,
        id: val
      };
      this.$common.storeCommit(this, Car_Mutations.CAR_GET_SAVE_FIND_ID, query);
    },
    //根据URI参数初始化数据
    initURIParameters() {
      if (!this.saveInsure.isGetIndex) {
        // alert("details:" + window.location.href);
        let userCode = "liberty";
        if (this.user.isLogin) {
          userCode = this.user.userDto.userCode;
        }
        let parm = { _this: this, url: window.location.href, userCode: userCode };
        this.$common.storeCommit(this, Mutations.SHARE_URL_SET, parm);
      }
    },
    //初始化分享信息
    initShare() {
      //分享地址初始化
      // let urlParm = { isLogin: this.user.isLogin, id: this.saveInsure.indexData.id, shareId: this.shareUuid };
      // let shareUrl = window.location.href.split('?')[0] + this.$common.getShareUrl(this, urlParm);
      // alert(this.shareUuid);
      let parmList = [];
      if (this.$common.isEmpty(this.saveInsure.shareUid)) {
        // debugger
        if (this.$common.isNotEmpty(this.saveInsure.refShareUUid) && this.saveInsure.refereeData != false && (this.saveInsure.refereeData.storeFlag == "1" || this.saveInsure.refereeData.storeFlag == 1)) {
          console.log('--');
          sessionStorage["SHARE_COMMON_TYPE"] = "REF";
          let urlParm = {
            key: Url_Key.SHARE_UUID,
            value: this.saveInsure.refShareUUid
          }
          parmList.push(urlParm);
          this.isShop = true;
        } else {
          console.log('---');
          sessionStorage["SHARE_COMMON_TYPE"] = "USER";
          if (this.user.isLogin) {
            let uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
            this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, uuid);
          }
          let urlParm = {
            key: Url_Key.SHARE_UUID,
            value: this.shareUuid
          }
          parmList.push(urlParm);
        }
        let urlPro = {
          key: Url_Key.PRODUCT_ID,
          value: this.saveInsure.indexData.id
        }
        parmList.push(urlPro);
      } else {
        parmList = this.$common.setUidShareParm(this);
        let urlPro = {
          key: Url_Key.PRODUCT_ID,
          value: this.saveInsure.indexData.id
        }
        parmList.push(urlPro);
      }
      let shareUrl = RequestUrl.BASE_URL + RouteUrl.CAR_INSURE + this.$common.setShareUrl(parmList);
      console.log(shareUrl);
      //分享初始数据
      let imgUrl = this.saveInsure.indexData.imgUrl;
      if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
        //补全产品的图片路径
        imgUrl = RequestUrl.WEB_PATH + imgUrl;
      }
      // let userCode = "";
      // if (this.user.isLogin) {
      //     userCode = this.user.userDto.userCode;
      // }
      // alert(this.saveInsure.indexData.productCname);
      // alert(this.saveInsure.indexData.descrition);
      // alert(imgUrl);
      // alert(shareUrl);
      // shareUrl = encodeURIComponent(shareUrl);
      let weChatData = {
        _this: this,
        shareData: {
          title: this.saveInsure.indexData.productCname,
          desc: this.saveInsure.indexData.descrition,
          imgUrl: imgUrl,
          url: shareUrl,
          _this: this,
          type: 5
        }
      };
      this.shopShareUrl = shareUrl;
      // 微信分享
      SharePage.weChatShare(weChatData);
      share.shareInit(weChatData);
      // 百度分享
      // SharePage.baiduShare(weChatData);
    },
    //微信分享关闭遮罩
    shareHide() {
      this.weChatShade = false;
      //启用滚动
      $("body").css("overflow-y", "auto");
    },
    //显示百度分享
    shareShow() {
      if (localStorage["IS_WE_CHAR"] == "T") {
        //微信
        this.weChatShade = true;
        $("body").css("overflow-y", "hidden");
      } else {
        this.$common.saveShare("二维码", this, 5);
        this.isShowShare = true;

        //百度分享打开
        // this.showBaiduShare = true;
      }
    },
    onlineClick() {
      // onlineCustomerService.onlineClickOfMobile(this, '4008882008');
      //触发index.html在线客服按钮的click事件，IOS系统在使用.native修饰符时，需要调用2次才能触发到click
      if (localStorage["BOTYPE"] == "I") {
        $(".zhiCustomBtn").trigger("click");
        $(".zhiCustomBtn").trigger("click");
      } else {
        $(".zhiCustomBtn").trigger("click");
      }
    },
    goInsureCar() {
      this.isSaveData = true;
      if (this.baseVali()) {

        // if (!this.carInsureData.isNewCar) {
        let data = {
          _this: this,
          licenseNo: this.carInsureData.licenseNo,
          isNewCar: this.carInsureData.isNewCar
        }
        // debugger
        this.$common.storeCommit(this, Car_Mutations.CAR_RENEWAL_QUERY, data);
        // }
        this.$common.goUrl(this, RouteUrl.CAR_INSURE_INFO);
      }
    },
    closeCarSele() {
      this.isShowCarSele = false;
    },
    baseVali() {
      if (this.$common.isEmpty(this.carInsureData.licenseNo)) {
        return this.showErrorMsg("车牌号不能为空！");
      } else {
        if (!this.carInsureData.isNewCar) {
          // let reg = /^[\u4e00-\u9fa5][a-zA-Z0-9]*$/;
          // if (reg.test(this.carInsureData.licenseNo) === false) {
          //   return this.showErrorMsg("车牌号格式错误，请重新输入！");
          // }
          // if (this.carInsureData.licenseNo.substring(0, 1) === '军' || this.carInsureData.licenseNo.substring(0, 1) === '警') {
          //   return this.showErrorMsg("车牌号不能包含 [军、警]！");
          // }
        }
      }
      if (this.$common.isEmpty(this.carInsureData.carOwner)) {
        return this.showErrorMsg("车主姓名不能为空");
      }

      return true;

    },
    goBack() {
      this.$common.goBackUrl(this, RouteUrl.INSURANCE);
      // this.$common.goBack(this);
    },
    saveData() {
      this.$common.storeCommit(this, Car_Mutations.CAR_INSURE_SAVE, this.carInsureData);
    },
    setData() {
      let _this = this;
      this.isSetData = true;
      this.carInsureData = this.car.carInsureData;
      setTimeout(() => {
        _this.isSetData = false;
      }, 0);
    },
    showErrorMsg(errorMsg) {
      this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
      // setTimeout(() => {
      //   this.$vux.alert.hide();
      // }, 3000);
      return false;
    },
    getRemoteConfig() {
      // this.$common.storeCommit(this, Car_Mutations.CAR_CONFIG_SAVE, CarConfigRemote.getConfig());
    }

  },
  beforeRouteEnter(to, from, next) {
    // sessionStorage["INSURE_FORM_URL"] = from.path;
    next();
  },
  beforeMount() {
    this.initURIParameters();
    // if (sessionStorage["INSURE_FORM_URL"] == "/") {
    //     this.$common.goUrl(this, RouteUrl.DETAILS);
    // }
  },
  beforeDestroy() {
    if (this.isSaveData) {
      this.saveData();
    }
  },
  mounted() {
    document.title = '车险投保';

    this.getRemoteConfig();
    // console.log('11111111111111111111111111');
    // console.log(carRemote);
    //初始化，没有footer
    this.$init.subPageInit(this);
    this.setData();

    //获得保存信息
    let query = {
      _this: this,
      riskCode: "0502"
    }
    this.$common.storeCommit(this, Mutations.GET_SAVE_DATA, query);

    let initQuery = {
      _this: this,
      riskCode: "0502"
    }
    if (!this.car.isGetCarOfferInit) {
      this.$common.storeCommit(this, Car_Mutations.CAR_OFFER_INIT, initQuery);
    }

    /**
     * 设置车险业务关系代码信息
     */
    let parm = {
      _this: this,
      user: this.user
    };
    this.$common.storeCommit(this, Mutations.SET_CAR_AGR, parm);


    let data = {
      _this: this
    }
    this.$common.storeCommit(this, Car_Mutations.SET_INIT_SELE_CAR, data);

    if (this.isInitData) {
      //初始化分享
      this.initShare();
    }


    //初始化在线客服内容
    let imgUrl = this.saveInsure.indexData.imgUrl;
    if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
      //补全产品的图片路径
      imgUrl = RequestUrl.WEB_PATH + imgUrl;
    }
    let dataCust = {
      product: {
        title: this.saveInsure.indexData.productCname,//标题 必传
        desc: this.saveInsure.indexData.descrition, //摘要
        url: window.location.href, //链接 必传
        label: this.saveInsure.indexData.minPrice + "起", //标签
        imgUrl: imgUrl, //图片
      },
      user: ""
    }
    if (this.user.isLogin) {
      dataCust.user = this.user.userDto;
    }
    //远程加载在线客服js
    onlineCustomerService.initJsFile(this, dataCust);
  }
};
</script>

<style lang="scss">
@import "~styles/carCommon";
</style>

<style  lang="scss">
.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.car-input {
  .weui-cell__bd {
    input {
      text-transform: uppercase;
    }
  }
}
.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

// .weui-input {
//     color: #000 !important;
// }
.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 15px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
  font-size: 15px;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  border-radius: 5px;
  padding: 2px;
  float: right;
  margin-right: 8px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll; // border: 1px solid #f3f3f3;
  font: 400 14.3333px Arial;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.insure_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.weui-form-preview__label {
  margin-right: 0em !important;
}

.insure__actionsheet {
  .weui-actionsheet__cell {
    padding: 0px !important;
    text-align: unset !important;
  }
}
.carinsure-btn {
  .btn {
    width: 90%;
    margin: 30px auto;
  }
  .weui-btn_primary {
    background-color: #C8161D;
  }
}

.save-mark {
  color: #000;
  font-size: 15px;
}
.save-time {
  font-size: 13px;
  color: #C8161D;
}
.save-price {
  font-size: 16px;
  color: #c8161d;
}
.details__footer_sub {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
  }
  span {
    display: block;
    float: left;
    width: 1px;
    height: 30px;
    margin-top: 10px;
    border-left: 1px solid #cfcfcf;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.no-savedata {
  text-align: center;
  color: #C8161D;
  font-size: 15px;
}

.details__footer_sub_left {
  float: left;
  width: 50%;
  padding: 5px 0px;
  div {
    float: left;
    height: 80%;
    width: 49%;
  }
  img {
    display: block;
    margin: 5px auto;
    width: 30px;
    height: auto;
  }
}

.details__footer_sub_left .service {
  border-right: 1px solid #cfcfcf;
}

.details__footer_details_rigth {
  border: 0px;
  width: 50%;
  height: 100%;
  line-height: 47px;
  float: left;
  background: #c8161d;
  color: white;
  font-size: 18px;
  text-align: center;
}
</style>
